<template>
<!--商品排序-->
  <div class="goods_list" v-if="true">
    <dl v-for="(v,k) in hotList" :key="k">
      <router-link :to="`/home/goods/detail/${v.id}`">
        <dt>
          <el-image class="el_image" lazy :src="getFirstImageUrl(v.imgUrl)" alt="" />
        </dt>
        <dd class="info">
          <div class="title">{{v.name}}</div>
          <div class="price">￥{{v.price}}</div>
          <div class="round">{{k+1}}</div>
        </dd>
      </router-link>
    </dl>
  </div>
  <div style="line-height:90px;text-align:center;color:#999;" v-else>暂时没有商品~~</div>

</template>
<script setup lang="ts">
/*获取销售排行*/
import { hotGoodsApi } from '@/api/home/index'
import { onMounted,ref,reactive,toRefs } from 'vue'
import type { MallGoodsVO } from '@/api/home/mallGoods/types'
const hotList = ref<MallGoodsVO[]>([]);

const props = defineProps({
  orderSort:{
    type: String,
    default: "hot"
  }
})
const data = reactive<any>({
  queryParams: {
    orderSort: props.orderSort,
  }
});
const { queryParams } = toRefs(data);
const getHotGoods=async ()=>{
  const res = await hotGoodsApi(queryParams.value)
  hotList.value = res.data;
}
/*取第一张图片*/
const getFirstImageUrl = (imageUrls: string) => {
  const image = imageUrls.split(',')
  return image.length > 0 ? image[0] : '@/assets/images/none.png'
}
onMounted(()=>{
  getHotGoods()
})
</script>
<style scoped lang="scss">
.goods_list{
  dl{
    border-bottom: 1px solid #efefef;
    padding: 20px 10px;
    &:last-child{
      border-bottom: none;
    }
    &:after{
      clear: both;
      display: block;
      content:'';
    }
    .info{
      display: flex;
      flex-direction:column;
      float: left;
      position: relative;
      .title{
        width: 120px;
        height: 55px;
        overflow: hidden;
      }
      .price{
        color:#ca151e;
        margin-top: 5px;
      }
      .round{
        background: #333;
        color:#fff;
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        border-radius: 50%;
        position: absolute;
        font-size: 12px;
        top:-15px;
        left:-95px;

      }
    }
    &:nth-child(1) .round,&:nth-child(2) .round,&:nth-child(3) .round{
      background: #ca151e;
    }
  }

  dt{
    width: 80px;
    height: 80px;
    margin-right: 10px;
    float: left;
    img{
      width: 80px;
      height: 80px;
    }
  }

}
</style>